<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

    <title>IT学习网2015课程学习情况</title>

    <!-- 基本资源库 -->
    <script type="text/javascript" src="../js/lib/jquery.js"></script>
    <script type="text/javascript" src="../js/lib/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../js/lib/jquery.fullpage.js"></script>

    <!-- H5对象资源&管理内容：页-组件 -->
    <script type="text/javascript" src="../js/H5.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/H5.css">

    <script type="text/javascript" src="../js/H5ComponentBase.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/H5ComponentBase.css">

    <style type="text/css">
    body{
        margin:0;
        padding:0;
        border:0;
    }
    </style>


</head>

<body>
    <!-- 测试内容组织功能，以及fullPage页面切换&组件切换 -->

    <!-- 内容组织管理，有可能会加载若干个资源 -->

    <script type="text/javascript">

    var h5 = new H5();
    
    h5.addPage('face')
        .addComponent('logo',{
            text:'logo',
            width:400,
            height:100,
            css:{backgroundColor:'red',top:200,opacity:0},
            center:true,
            animateIn:{opacity:1},
            animateOut:{opacity:0}
        })
        .addComponent('info',{
            text:'info',
            width:400,
            height:100,
            css:{backgroundColor:'#ddd',top:300},
            center:true,
        })
      .addPage('slogan')
        .addComponent('caption',{
            text:'核心理念',
            width:400,
            height:100,
            css:{backgroundColor:'green',top:350},
            center:true,
        })
        .addComponent('text',{
            text:'text',
            width:400,
            height:100,
            css:{backgroundColor:'#333',top:200},
            center:true,
        })
      .addPage('page-3')
        .addComponent('caption',{
            text:'package',
            width:400,
            height:100,
            css:{backgroundColor:'green',top:350},
            center:true,            
        })
      .loader()

    </script>
</body>

</html>